<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="exam-room-info" :title="(type == 'add' ? '新建' : '编辑') + '考场'"
            :close-on-click-modal="false" size="1024px">
            <div>
                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px" size="large">
                    <el-form-item label="考场名称" prop="siteName">
                        <el-input v-model.trim="form.siteName" placeholder="请输入考场名称" />
                    </el-form-item>
                    <el-form-item label="考场封面" prop="cover">
                        <UploadImage v-model="form.cover" />
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                        <!-- startTime -->
                        <el-date-picker v-model="form.startTime" type="datetime" placeholder="请输入开始时间"
                            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                            time-format="HH:mm" />
                    </el-form-item>
                    <el-form-item label="考试时长" prop="examDuration">
                        <!-- examDuration -->
                        <el-input v-model="form.examDuration" type="number" placeholder="请输入考试时长(单位分)" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="handleSave">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </ModalComponent>
    </div>
</template>
<script setup >
import { onMounted, ref } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import UploadImage from "@/components/upload-image/index.vue"
import { AddSite, UpdateSite } from "@/api/gradingTeacher"
import { ElMessage } from 'element-plus';
const form = ref({});
const type = ref("add")
const emit = defineEmits(['update'])
const ruleFormRef = ref()
const validateScore = (rule, value, callback) => {
    if (value <= 0) {
        callback(new Error('请输入正确的时长'))
    } else {
        callback();
    }
}
const rules = ref({
    siteName: [
        { required: true, message: '请输入考场名称', },
    ],
    startTime: [
        { required: true, message: '请选择开始时间', },
    ],
    examDuration: [
        { required: true, message: '请输入考试时长', },
        { validator: validateScore, },
    ],
    cover: [
        { required: true, message: '请上传封面', },
    ],

});
const handleOpen = (e) => {
    type.value = e.type;
    if (e.type == 'add') {
        form.value = {
            eventId: e.data.eventId,
            siteName: "",
            startTime: "",
            examDuration: 100
        }
    } else if (e.type == 'edit') {
        form.value = {
            eventId: e.data.eventId,
            siteName: e.data.siteName,
            startTime: e.data.startTime,
            examDuration: e.data.examDuration,
            siteId: e.data.siteId,
            cover: e.data.cover,
        }
    }
}
const handleSave = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            let res
            if (type.value == 'add') {
                res = await AddSite(form.value, {
                    eventId: form.value.eventId
                })
            } else if (type.value == 'edit') {
                res = await UpdateSite(form.value)
            }

            if (!res.success) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success(res.message);
                emit('update')
            }
        } else {
            return false;
        }
    })


}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped></style>